<template>
    <el-dialog :title="titleArray[types]" :visible.sync="showDialog" width="500px" custom-class="menu-management-dialog">
     <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
            <el-form-item label="菜单名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入菜单名称"></el-input>
            </el-form-item>
               <el-form-item label="类型选择" prop="type">
                  <el-radio v-model="ruleForm.type" label="1">菜单</el-radio>
                  <el-radio v-model="ruleForm.type" label="2">按钮</el-radio>
            </el-form-item>
              <el-form-item label="菜单地址" prop="url">
                <el-input v-model="ruleForm.url" placeholder="请输入菜单地址"></el-input>
            </el-form-item>
              <el-form-item label="菜单图标" prop="email">
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
              <el-form-item label="权限描述" prop="desc">
                  <el-input  v-model="ruleForm.desc"></el-input>
            </el-form-item>
             <el-form-item label="上级菜单" prop="code">
                   <el-tree
                        :data="data2"
                        show-checkbox
                        node-key="id"
                        :props="defaultProps"
                        ref="tree">
                    </el-tree>
            </el-form-item>
     </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.stop="cancel">返回</el-button>
      <el-button type="primary" @click="confirm('ruleForm')">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
    name: 'ManageDialog',
    props: {
        types: {
            type: Number,
            default () {
                return 1
            }
        },
        outerVisible: {
            type: Boolean,
            default () {
                return false
            }
        },
        departmentArray: {
            type: Array,
            default () {
                return []
            }
        }
    },
    data () {
        return {
            showDialog: false,
            titleArray: ['修改菜单/按钮', '新增菜单/按钮'],
            ruleForm: {},
            rules: {
                name: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '请输入菜单地址', trigger: 'blur' }
                ],
                department: [
                    { required: true, message: '请选择部门', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择菜单类型', trigger: 'change' }
                ]
            },
            data2: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    methods: {
        confirm (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    alert('submit!')
                } else {
                    return false
                }
            })
        },
        cancel () {
            this.showDialog = false
        }
    },
    watch: {
        'showDialog' (state) {
            if (!state) {
                this.$refs.ruleForm.resetFields()
                this.$emit('hideManagementDialog')
            }
        },
        'outerVisible' (state) {
            if (state) {
                this.showDialog = true
            }
        }
    }
}
</script>
<style lang="less">
.menu-management-dialog {
}
</style>
